<template>
  <div class="innnerWrapper">
    <div style="margin-bottom:55px;padding:24px;" class="briefDesWrapper">
      <div class="orderWrapper">
        <div class="pageTitle">
          <div class="logo" :class="{ [logoMapping[currentTab]]: true }"></div>
          <p class="title">{{ details.name }}</p>
        </div>
        <div class="btnWrapper" v-if="!isAdmin && details.status === 1">
          <el-button
            @click="subscribe"
            style="width:100px;border-radius:100px;"
            :class="{ isSubscribed: details.subscribeState }"
            type="primary"
          >{{ details.subscribeState ? '已订阅' : '订阅' }}</el-button>
        </div>
      </div>
      <div class="infoWrapper">
        <div class="orderInfo">
          <p class="infoLabel">发布人：{{ details.nickname }}</p>
          <p class="infoLabel">历史订阅量：{{ details.subscribAmount }}</p>
        </div>
      </div>
    </div>
    <el-divider></el-divider>
  </div>
</template>
<script>
import { mapState } from 'vuex'
export default {
  data() {
    return {
      logoMapping: {
        1: 'industry',
        2: 'miniService',
        3: 'model'
      }
    }
  },
  computed: {
    ...mapState({
      currentTab: function(state) {
        return this.$route.query.type
          ? sessionStorage.getItem('currentTabBackup')
          : state.home.currentTab
      },
      token: state => state.login.token,
      isAdmin: (state) => state.login.loginInfo.roleList && state.login.loginInfo.roleList[0].roleCode === '系统管理员'
    })
  },
  methods: {
    refreshList() {
      this.details.subscribeState = !this.details.subscribeState
      this.details.subscribeState
        ? this.details.subscribAmount++
        : this.details.subscribAmount--
    },
    subscribe() {
      // 判断用户是否登录
      if (!this.token) {
        this.$message.warning('请登录后再进行相关操作')
        return
      }
      this.$confirm(
        this.details.subscribeState === false
          ? '是否要订阅?'
          : '是否要取消订阅',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'info'
        }
      )
        .then(() => {
          const reqUrl =
            this.details.subscribeState === false
              ? 'detail/subscribeApp'
              : 'detail/unSubscribeApp'
          this.$store
            .dispatch(reqUrl, {
              currentTab: this.currentTab,
              params: {
                id: this.details.id,
                subscriber: sessionStorage.getItem('loginUserId')
              }
            })
            .then((result) => {
              this.refreshList()
              this.$message({
                type: 'success',
                message: result
              })
            })
            .catch((err) => {
              this.$message({
                type: 'error',
                message: err.message
              })
            })
        })
        .catch(() => {})
    }
  },
  props: {
    details: {
      type: Object,
      default: () => {}
    }
  },
  created() {}
}
</script>
<style lang="scss" scoped>
.innnerWrapper {
  .briefDesWrapper {
    .orderWrapper {
     margin-bottom: 20px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .pageTitle {
        display: flex;
        justify-content: space-between;
        align-items: center;
        .logo {
          width: 60px;
          height: 60px;
          flex: 0 0 60px;
          border-radius: 50%;
          text-align: center;
          margin-right: 15px;
          &.miniService {
            background: no-repeat center
              url('../../assets/miniService_logo.png');
          }
          &.model {
            background: no-repeat center url('../../assets/model_logo.png');
          }
          &.industry {
            background: no-repeat center url('../../assets/industry_logo.png');
          }
        }
        .title {
          height: 40px;
          font-size: 28px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: rgba(56, 56, 56, 1);
        }
      }
      .btnWrapper {
        margin-left: 16px;
      }
    }
    .infoWrapper {
      background: #f3f3f3;
      border-radius: 1px;
      position: relative;
      width: 100%;
      height: 90px;
      .orderInfo {
        position: absolute;
        right: 24px;
        bottom: 0;
        font-size: 16px;
        .infoLabel {
          color: #6c6c6c;
        }
      }
    }
  }
  .isSubscribed {
    border: none;
    background: #ccc;
  }
}
</style>
